<!--
- Author:   .
- Date:    2018/1/11 0011.
- File:    integral.
-->
<template>
  <div class="Web_Box">

    <div class="account_tab" style="margin-top: 0px;position:fixed; top:0; left:0; width:100%; background:#fff; z-index:2;">
      <div class="integrat2 f-cb">
        <span v-show="type== '2'">当前 {{memberInfo.freeze_balance}}</span>
        <span v-show="type == '3'">当前 {{memberInfo.stock}}</span>
        <!--<router-link :to="{name: 'member-spread'}" class="more">推荐用户购买</router-link>-->
      </div>
      <div class="suborbox f-cb">
        <div class="subornat"><i class="iconfont icon-downdot"></i>
          <select v-model="selectUserLv"  style="width: 100px">
            <option value="">全部来源</option>
            <option :value="$dictionary.userLv.a">一级</option>
            <option :value="$dictionary.userLv.b">二级</option>
            <option :value="$dictionary.userLv.c">其他</option>
            <!--<option :value="$dictionary.userLv.c">三级</option>-->
          </select>
        </div>
        <span style="padding: 5%">{{selectMonth}}</span>

        <!--<div class="subornat"><i class="iconfont icon-downdot"></i>-->
          <!--<select v-model="coin_type" style="width: 100px" >-->
            <!--<option :value="0">全部货币</option>-->
            <!--<option :value="1">云宝</option>-->
            <!--<option :value="2">花股</option>-->
            <!--<option :value="3">花粉</option>-->
            <!--&lt;!&ndash;<option :value="$dictionary.userLv.c">三级</option>&ndash;&gt;-->
          <!--</select>-->
        <!--</div>-->
        <div class="screenbox" style="width: auto"><a><i class="iconfont icon-shijian" @click="openDatePicker"></i></a><router-link :to="{name: 'search-integral'}">搜索</router-link></div>
      </div>
      <ul class="f-cb">
        <!--<li style="width: 25%" :class="{'on': status == $dictionary.withdrawStatus.waiting}" @click="switchDrawStatus($dictionary.withdrawStatus.waiting)">转出中</li>-->
        <!--<li style="width: 25%" :class="{'on': status == $dictionary.withdrawStatus.resolve}" @click="switchDrawStatus($dictionary.withdrawStatus.resolve)">已转出</li>-->
        <!--<li style="width: 25%" :class="{'on': status == $dictionary.withdrawStatus.reject}" @click="switchDrawStatus($dictionary.withdrawStatus.reject)">其他</li>-->
        <li style="width: 25%" :class="{'on': coin_type == 1}" @click="switchDrawStatus(1)">云宝来源</li>
        <li style="width: 25%" :class="{'on': coin_type == 2}" @click="switchDrawStatus(2)">云通证来源</li>
        <li style="width: 25%" :class="{'on': coin_type == 3}" @click="switchDrawStatus(3)">云积分来源</li>
        <li style="width: 25%" :class="{'on': coin_type == 4}" @click="switchDrawStatus(4)">云劵来源</li>
      </ul>
    </div>
    <div v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false" style="margin-top: 150px">
      <div class="inter_tab" v-for="history in historyList.data"><a>
        <table width="100%" border="0">
          <tr>
            <td colspan="2" width="100%" v-show="history.style != 29 && history.remark != '用户撤销出售云宝:100'">贡献人：{{history.pname}}</td>
            <!--<td width="50%">状态：{{history.state | integralStatusTxt}}</td>-->
          </tr>
          <tr>
            <td colspan="2" width="100%" v-show="history.remark != '用户撤销出售云宝:100'" >类型：{{history.type | userLvTypeName}}</td>
            <td colspan="2" width="100%" v-show="history.remark == '用户撤销出售云宝:100'">类型：撤销交易</td>
            <!--<td width="50%">状态：{{history.state | integralStatusTxt}}</td>-->
          </tr>
          <tr>
            <td colspan="2" width="100%">贡献：<span class="cr_f83166">￥{{history.freeze_balance}}</span></td>
            <!--<td v-show="history.type == $dictionary.userLv.a && type == '2'">合计：<span class="cr_f83166">￥{{parseFloat(history.order_amount) + parseFloat(history.freeze_balance)}} </span>-->
            <!--</td>-->
          </tr>
          <!--<tr>-->
            <!--<td width="50%" v-show="type == '2'">本金：<span>￥{{history.order_amount}}</span></td>-->
            <!--<td>购买人：{{history.member_truename}}</td>-->
          <!--</tr>-->
          <tr>
            <td colspan="2" width="100%">下单时间：{{history.fbaddtime | timestampToDate('yyyy-MM-dd hh:mm')}}</td>
            <!--<td>到账时间：{{history.fbaddtime | timestampToDate('yyyy-MM-dd')}}</td>-->
          </tr>
          <tr>
            <td colspan="2" width="100%" style="color: #898989;">说明：{{history.remark}}</td>
          </tr>
        </table>
      </a></div>
    </div>
    <loading-more :allLoaded="historyList.allLoaded" :show="historyList.data.length > 0"></loading-more>
    <empty-data :show="historyList.allLoaded && historyList.data.length <= 0"></empty-data>
    <back-nav></back-nav>
    <footer-tab></footer-tab>
    <datetime-picker
      ref="datePicker"
      v-model="currentDate"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value}日"
      @confirm="handleDateChange">
    </datetime-picker>
  </div>
</template>

<script>
  import DatetimePicker from '../../../components/monthPicker'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        type: this.$route.query.type || '2', // 2积分 3股权积分（不包含本金）
        historyList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        currentDate: new Date(),
        selectMonth: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01',
        selectUserLv: '',
        coin_type: 1
      }
    },
    components: {
      'datetime-picker': DatetimePicker
    },
    created() {
      this.initBalanceHistory()
    },
    computed: {},
    watch: {
      selectUserLv: function (value) {
        this.selectUserLv = value
        this.initBalanceHistory()
      },
      coin_type: function (value) {
        this.coin_type = value
        this.initBalanceHistory()
      }
    },
    methods: {
      switchDrawStatus(value) {
        this.coin_type = value
      },
      gotoOrderDetail(orderId, isSelf) {
        this.$router.push({name: 'order-detail', params: {id: orderId}, query: {self: isSelf, type: this.type}})
      },
      openDatePicker() {
        this.$refs.datePicker.open()
      },

      handleDateChange(value) {
        let date = new Date(value)
        let dateStr = this.$utils.formatDate(date, 'yyyy-MM-dd')
        if (dateStr == 'NaN-aN-aN') {
          this.selectMonth = new Date().getFullYear() + '-0' + (new Date().getMonth() + 1) + '-01'
        } else {
          this.selectMonth = dateStr
        }
        console.log(dateStr)
        this.initBalanceHistory()
      },
      initBalanceHistory() {
        this.historyList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getIntegralHistory(this.historyList.page, this.historyList.pageSize)
      },
      getIntegralHistory(page, pageSize) {
        this.historyList.loading = true
        let params = {
          type: this.selectUserLv,
          s_time: this.selectMonth,
          style: this.coin_type,
          page: page,
          pageSize: pageSize
        }
        this.$request.getIntegralHistory(params).then(data => {
          if (data.length < this.historyList.pageSize) {
            this.historyList.allLoaded = true
          }
          this.historyList.data = [...this.historyList.data, ...data]
        }).finally(() => {
          this.historyList.requested = true
          this.historyList.loading = false
        })
      },
      loadMore() {
        if (this.historyList.loading || this.historyList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getIntegralHistory(++this.historyList.page, this.historyList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>
